<template>
  <div>
    <Header @changePages="changePages" :acting="actingName" />
    <Recommend v-if="activeName === '推荐'" @toTabsPage="toTabsPage" />
    <Intelligence v-if="activeName == '智能'" />
    <Television v-if="activeName === '电视'" />
    <Household v-if="activeName === '家电'" />
    <Notebooks v-if="activeName === '笔记本'" />
  </div>
</template>

<script>
import Header from "./Header";
import Recommend from "./Recommend";
import Intelligence from "./Intelligence";
import Television from "./Television";
import Household from "./Household";
import Notebooks from "./Notebooks";
export default {
  name: "home",
  data() {
    return {
      activeName: "推荐",
      actingName: "",
    };
  },
  components: {
    Header,
    Recommend,
    Intelligence,
    Television,
    Household,
    Notebooks,
  },
  methods: {
    changePages(activeName) {
      //将子页面的名字传给父组件
      this.activeName = activeName;
      this.actingName = activeName;
    },
    toTabsPage(sonValue) {
      //通过点击推荐页切换到其他tab
      this.activeName = sonValue; //不改这个不会切换页面展示
      this.actingName = sonValue; //改这个是为了把需要高亮的名字传给对应的子组件
    },
  },
};
</script>

<style lang="less" scoped>
</style>